<template>
  <div id="driverView" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">司机视图</BreadcrumbItem>
				<BreadcrumbItem to="/driver/view">司机视图</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="changeModel">
            <template v-if="model === 0">
              <Icon type="navicon-round"></Icon><span>列表展示</span>
            </template>
            <template v-else>
              <Icon type="card"></Icon><span>名片展示</span>
            </template>
          </Button>
	    	</ButtonGroup>
			</div>
		</div>
    <TableSearch>
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="机构">
              <Select placeholder="请选择机构" v-model="searchForm.orgIds" :multiple="true">
								<OrgTreeOption></OrgTreeOption>
							</Select>
            </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="姓名/手机">
              <DriverComplete v-model="driverIds" multiple></DriverComplete>
            </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="main">
      <div v-if="model===0" class="card-list">
        <Row :gutter="16">
          <Col :md="6" v-for="(v,i) in pageData.thisPageElements" :key="`driver-view-card-item-${i}`">
            <Card dis-hover>
              <a class="driver-card" @click="goDetail(v)">
                <div class="media">
                  <div class="pic">
                    <Icon v-if="!v.headPicUrl" type="person" size="65"></Icon>
                    <img v-else :src="v.headPicUrl" />
                  </div>
                  <div class="name">{{v.driverName}}</div>
                  <div class="phone">{{v.tel}}</div>
                </div>
                <div class="info">
                  <div class="info-item">
                    <label>综合安全指数：</label>
                    <span v-if="v.securityIndex !== null" :style="{'color':getScoreColor(v.securityIndex)}">{{v.securityIndex}}</span>
                    <span v-else>-</span>
                  </div>
                  <div class="info-item">
                    <label>驾龄：</label><span>{{v.drivingAge}}</span>
                  </div>
                  <div class="info-item">
                    <label>行驶时长：</label><span>{{time(v.duration||0,1,1)}}</span>
                  </div>
                  <div class="info-item">
                    <label>行驶里程：</label><span>{{mileage(v.mileage)}}</span>
                  </div>
                  <div class="info-item">
                    <div class="col"><label>违章：</label><span>{{v.totalWzTimes||'--'}}</span></div><div class="col"><label>事故：</label><span>{{v.accidentTimes||'--'}}</span></div>
                  </div>
                </div>
              </a>
            </Card>
          </Col>
          <Col :md="24" v-if="!isLoading && pageData.totalNumberOfElements <= 0">
            <div>暂无数据</div>
          </Col>
        </Row>
      </div>
      <div v-else class="table-content">
        <div class="table" style="margin:0;">
          <table>
            <thead>
              <th>司机</th>
              <th>手机号</th>
              <th>综合安全指数</th>
              <th>驾龄</th>
              <th>累计行驶里程</th>
              <th>累计行驶时长</th>
              <th>累计违章</th>
              <th>累计事故</th>
              <th>累计不良驾驶</th>
              <th>累计不良操作</th>
            </thead>
            <tbody>
              <tr v-for="(v,i) in pageData.thisPageElements" :key="`driver-view-list-item-${i}`">
                <td>
                  <a @click="goDetail(v)">{{v.driverName}}</a>
                </td>
                <td>{{v.tel}}</td>
                <td>{{v.securityIndex||'--'}}</td>
                <td>{{v.drivingAge}}</td>
                <td>{{mileage(v.mileage)}}</td>
                <td>{{time(v.duration,1,2)}}</td>
                <td>{{v.totalWzTimes||'--'}}</td>
                <td>{{v.accidentTimes||'--'}}</td>
                <td>{{v.badDriving||'--'}}</td>
                <td>{{v.badOperation||'--'}}</td>
              </tr>
              <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
                <td colspan="10">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <Page :total="pageData.totalNumberOfElements" :page-size="pageSize" :current="current" @on-change="search" show-total></Page>
			<Spin size="large" fix v-if="isLoading"></Spin>
    </div>

  </div>
</template>
<style lang="less" src="@/assets/styles/driver/view.less"></style>

<script>
	import {mapState,mapActions} from 'vuex'
  import unit from '@/util/unit'

  export default {
    data(){
      return {
        model:0, // 0：名片视图，1：列表视图
        current:1,
        pageSize:20,
        driverIds:[],
        searchForm:{orgIds:[],driverIds:''},
        submitForm:{},
        score:[[0,59],[60,79],[80,89],[90,100]],
        scoreColor:['#FF0000','#FF9A02','#5AC0E7','#1480AD']
      };
    },
    computed:{
      ...mapState('base',['userinfo']),
      ...mapState('driver/driverView',['isLoading','pageData'])
    },
    methods:{
      mileage:unit.mileage,time:unit.time,
      ...mapActions('driver/driverView',['reload']),
      loadPage(i){
        this.current = i;
        this.reload({pageNum:this.current,pageSize:this.pageSize,...this.submitForm});
      },
      search(){
        this.submitForm = {...this.searchForm};
        this.submitForm.driverIds = this.driverIds.join(',');
        this.loadPage(1);
      },
      changeModel(){
        this.model = this.model === 0 ? 1 : 0;
      },
      getScoreColor(score){
        let index = this.score.findIndex(([min,max]) => score >= min && score <= max);
        return this.scoreColor[index];
      },
      goDetail(v){
        let r = {name:'driverDetail',query:{id:v.driverId,name:v.driverName,tel:v.tel}};
        this.$router.push(r);
      }
    },
    mounted(){
      this.search();
    }
  }
</script>
